<template>
	<view class="framer bg">
		<view class="framer-bj">
			<view class="cover-img"></view>
			<image :src="info.image_b" class="frame-img" mode="aspectFill"></image>
			<view class="user-info flex">
				<image :src="info.image" mode="aspectFill" class="userImg"></image>
				<view class="flex flex-column ml-20" style='height: 165rpx;align-items: flex-start;padding-top: 70rpx;'>
					<view class="white size-30 text-center">{{ info.name }}</view>
					<view class="size-26 mt-5" style='color: #d7d7d7'>{{ info.desc }}</view>
				</view>
			</view>
			
			<view class="framer-bj-head">
				 <view class="status_bar"></view>
				 <view class="flex pl-30" @click="retuenTop" style="height: 44px;position: relative;z-index: 2022;">
				 	<image src="/static/back.png" mode="" class="back"></image>
				 </view>
			</view>
		</view>
		<view class="framer-main">
			<view class="mt-40 mb-40 white size-36 f-bold">藏品空间</view>
			<view class="flex flex-wrap">
				<view class="mb-20" v-for="(item,index) in list" :key="index" @click="goDetails(item.id)">
					<image :src="item.image" mode="aspectFill" class="coveImg"></image>
					<view class="item">
						<view class="size-30 white f-bold">{{ item.name }}</view>
						<!-- <view class="white f-bold size-28">最新成交价￥{{ item.price }}</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:null,//
				info:{},//
				page:1,
				pages:1,
				list:[],
			};
		},
		methods:{
			retuenTop () {
				if (getCurrentPages().length <= 1) {
					uni.switchTab({
						url:'/pages/home/index'
					})
				} else {
					uni.navigateBack()
				}
				
			},
			goDetails(id) {
			  uni.navigateTo({
			    url: `/pages/home/homeDetails?id=${id}`,
			  })
			},
			getList () {
				this.$http('api/Newapi/chuangZuoDetail',{
					id:this.id,
					page:this.page
				}).then(res=>{
					this.info = res.list
					this.list = this.page == 1 ? res.goods.data : [...this.list,...res.goods.data]
					this.pages = res.goods.last_page
				})
			}
		},
		onLoad ({id}) {
			this.id = id
			this.getList()
		}
		
	}
</script>
<style>
	page {
		background: #0A0B20;
	}
</style>
<style lang="scss" scoped>
	page{
		background: #f5f5f5;
	}
	.white{
		color: #3c3c3c;
	}
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.back {
		width: 20rpx;
		height: 36rpx;
	}
	.framer-bj-head {
		width: 100%;
		top: 30rpx;
		position: absolute;
		z-index: 2022;
	}
.framer-bj {
	width: 100%;
	height: 380rpx;
	position: relative;
	// top: 0;
	// left: 0;
	// z-index: 22;
	.frame-img{
		width: 100%;
		height: 380rpx;
		// position: absolute;
		// top: 0;
		// left: 0;
	}
	.cover-img{
		width: 100%;
		height: 380rpx;
		background-color: rgba(0,0,0,.25);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 33;
	}
}
.framer-main {
	margin-top: 130rpx;
	padding: 0rpx 30rpx 0 30rpx;
	// position: fixed;
	// top: 20rpx;
	z-index: 25;
}
.user-info{
	position: absolute;
	left: 30rpx;
	bottom: -98rpx;
	z-index: 55;
}
.userImg {
	width: 165rpx;
	height: 165rpx;
	border-radius: 50%;
}
.coveImg {
	width: 330rpx;
	height: 300rpx;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	background-color: #fff;
}
.item {
	background: #fff;
	padding: 20rpx;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
}
</style>
